<!--渐进式JavaScript 框架的网址：https://v2.cn.vuejs.org/-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的基本语法实例</title>

    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<!--<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>-->

<div id="app">
    <!--变量-->
    {{ message }}

    <!--表达式-->
    <div>{{bool ? 'a' : 'b'}}</div>

    <!--v-html的使用-->
    <div v-html="htmlStr"></div>

    <!--v-model双向绑定-->
    <input type="text" v-model="count">
    <div>{{count}}</div>

    <!--v-if的使用-->
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score>=80">良好</div>
    <div v-else-if="score>=70">中等</div>
    <div v-else-if="score>=60">及格</div>
    <div v-else="score<=60">不及格</div>

    <!--v-bind绑定属性的使用-->
    <a v-bind:href="url">江南大学</a>
    <!--简写v-bind-->
    <a :href="url">江南大学</a>

    <!--事件绑定v-on的使用-->
    <!--样式中的属性用;隔开-->
    <div style="width: 100px;height: 100px;background-color: red" v-on:click="block1" id="blockid1"></div>
    <!--事件绑定v-on的缩写-->
    <div style="width: 100px;height: 100px;background-color: red" @click="block1"></div>

    <h3>v-for的使用</h3>
    <div v-for="(item,index) in hobbies">{{index}}.{{item}}</div>

    <div v-for="(item,index) in users" :key="index">{{(index+1)+'.'+item.name}}</div>

    <h3>动态class示例</h3>
    <div style="display: flex;padding: 0 10px">
        <select v-model="currentMenu">
            <option value="首页">首页</option>
            <option value="学生">学生</option>
            <option value="课程">课程</option>
            <option value="教师">教师</option>
        </select>

        <div v-for="item in menus"
             :class="{'active':item===currentMenu}"
             style="padding: 0 10px;">{{item}}</div>
    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            /*对象里面的元素用,隔开*/
            message: 'Hello Vue!',
            bool:false,
            htmlStr:'<strong style="color:red">字体加粗</strong>',
            count:'',
            score:76,
            url:'http://www.jiangnan.edu.cn',
            hobbies:['篮球','羽毛球','足球','乒乓球'],
            users:[{name:'张三'},{name:'李四'},{name:'王五'}],
            currentMenu:'首页',
            menus:['首页','学生','课程','教师']
        },
        methods:{
            block1(){
                var blockcolor = document.getElementById('blockid1').style.backgroundColor;
                if(blockcolor==='blue'){
                    document.getElementById('blockid1').style.backgroundColor = 'red';
                }
                else{
                    document.getElementById('blockid1').style.backgroundColor = 'blue';
                }
            }
        }
    })
</script>

</body>
</html>